import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { itemInfoList } from "@/apis";
import "./style.css";
import Swiper from "swiper";
import IdeaDetailFooter from "./IdeaDetailFooter";
import IdeaDetailContent from "./IdeaDetailContent";

export default function IdeaDetail() {
  const result = new URLSearchParams(location.search);
  const id = result.get("id");
  const [idea, setIdea] = useState([]);
  const [imgData, setImgData] = useState([]);
  useEffect(() => {
    (() => {
      let data = itemInfoList;
      data = data.filter((item) => item.id === id);
      setIdea(data);
      const { imgs } = data[0];
      setImgData(imgs);
    })();
  }, []);
  useEffect(() => {
    let swiper;
    if (!swiper) {
      swiper = new Swiper(".swiper-container", {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
        },
      });
    }
  }, [imgData]);
  return (
    <div>
      {idea.map((item) => (
        <div key={item.id}>
          <div className="idea-detail-header">
            <span className="idea-detail-header-left">
              <Link
                to={{
                  pathname: "/home/idea",
                }}
              >
                <i className="fa fa-angle-left"></i>
              </Link>
              <img src={item.userimg} alt="userimg" className="userimg" />
              <span className="username">{item.username}</span>
            </span>
            <span className="idea-detail-header-right">
              <p className="concern">关注</p>
              <i className="iconfont icon-zhuanfa"></i>
            </span>
          </div>
          <div className="swiper-container img-swiper">
            <div className="swiper-wrapper">
              {imgData.map((imgs) => (
                <div className="swiper-slide" key={imgs.imgId}>
                  <img src={imgs.img} width="100%" />
                </div>
              ))}
            </div>
            <div className="swiper-pagination"></div>
          </div>
          <p className="content">{item.content}</p>
        </div>
      ))}
      <IdeaDetailContent />
      <IdeaDetailFooter idea={idea} />
    </div>
  );
}
